<template>
	<div style="width: 50%;display: inline-block;vertical-align: top;" class="pl10 pr10 mb12">
		<div class="displayFlex mb18 pl10">
			<div style="font-size: 15px;color: #5A5A5A;">噪音</div>
			<div v-if="listHeaderMock.mock8" style="color: #888;" class="font12 ml10">以下数据为演示数据</div>
		</div>

		<div
			style="width: 100%;height: 396px;background: #FFFFFF;border-radius: 20px;display: flex;justify-content: space-between;padding: 28px;">
			<div>
				<div>
					<span class="font24" style="color: #757575;">{{data6.completePercent}}%</span>
					<span style="color: #5A5A5A;" class="font14">定期检测完成率</span>
				</div>
				<div class="listItem5"
					style="width: 200px;height: 200px;border-radius: 50%;color: #fff;text-align: center;font-size: 18px;padding-top: 40px;">
					<el-progress type="circle" :percentage="data6.completePercent" color="#87F0B1"
						define-back-color="#F4F5FA" text-color="#fff" :stroke-width="10" :width="120"></el-progress>
				</div>
			</div>

			<div style="width: calc(100% - 220px);">
				<div style="width: 100%;height: 37px;background: #F6F7FB;" class="displayFlexBet">
					<div style="width: 40px;"></div>
					<div style="width: 150px;"></div>
					<div style="width: 200px;" class="displayFlex">
						<img src="@/assets/sIcon131.png" style="height: 19px;width: 19px;" />
						<span class="font14 ml5" style="color: #A1A1A1;">白天</span>
					</div>
					<div style="width: 200px;" class="displayFlex">
						<img src="@/assets/sIcon133.png" style="height: 19px;width: 19px;" />
						<span class="font14 ml5" style="color: #A1A1A1;">夜间</span>
					</div>
				</div>
				<div style="max-height: 200px;overflow-y: auto;">
					<div v-for="(item,index) in data6.showData.dataList" class="pb14 displayFlexBet"
						:class="[index == 0?'mt14':'mt14']" style="border-bottom: 1px solid#F8F7F9;">
						<div style="width: 40px;">
							<div v-if="item.result == 'NORMAL'" class="textCenter"
								style="width: 32px;height: 16px;border-radius: 4px;background: #DCEBFC;color: #007AFF;font-size: 12px;">
								{{item.resultStr}}
							</div>
							<div v-else-if="item.resultStr" class="textCenter"
								style="width: 32px;height: 16px;border-radius: 4px;background: #FAE6E6;color: #EF5350;font-size: 12px;">
								{{item.resultStr}}
							</div>
						</div>

						<div style="width: 150px;color: #5A5A5A;" class="font14">{{item.areaName}}</div>
						<div style="width: 200px;color:#5A5A5A" class="displayFlex pl35">
							<!-- <img src="@/assets/sIcon131.png" style="height: 19px;width: 19px;" /> -->
							<span>{{item.daytimeValue || '--'}}dB</span>
						</div>
						<div style="width: 200px;color:#5A5A5A" class="displayFlex pl35">
							<!-- <img src="@/assets/sIcon133.png" style="height: 19px;width: 19px;" /> -->
							<span>{{item.nightValue || '--'}}dB</span>
						</div>
					</div>
				</div>

				<!-- <div v-if="data6.showData.errNum || data6.showData.sucNum" class="displayFlex pb14 mt14"
					style="border-bottom: 1px solid#EDECF1;">
					<span class="font15" style="color: #555;margin-right: 40px;">
						其他{{data6.dataList.length - data6.showData.dataList.length}}点位
					</span>
					<div class="displayFlex" style="margin-right: 40px;">
						<div class="textCenter"
							style="width: 32px;height: 16px;border-radius: 4px;background: #DCEBFC;color: #007AFF;font-size: 12px;">
							正常
						</div>
						<div class="ml5">{{data6.showData.sucNum}}个</div>
					</div>

					<div class="displayFlex">
						<div class="textCenter"
							style="width: 32px;height: 16px;border-radius: 4px;background: #FAE6E6;color: #EF5350;font-size: 12px;">
							异常
						</div>
						<div class="ml5">{{data6.showData.errNum}}个</div>
					</div>

				</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	let that
	import HomeMock from "@/assets/mock/HomeMock.json"

	export default {
		data() {
			return {
				data6: {
					showData: {
						dataList: []
					}
				},
				loading: true,
				listHeaderMock: {
					mock8: false,
				}
			}
		},
		mounted: function() {
			that = this
			that.getHpNoiseReport()
		},

		methods: {
			getHpNoiseReport() {
				that.ajax({
					url: 'homepage/getHpNoiseReport',
					contentType: 'application/json',
					data: JSON.stringify({}),
					success: function(result) {
						that.listHeaderMock.mock8 = false
						if (result.status == -6) {
							that.listHeaderMock.mock8 = true
							result.data = HomeMock.noiseReport
						}

						let thisData = result.data
						let showData = {
							dataList: [],
							errNum: 0,
							sucNum: 0
						}
						if (thisData.dataList && thisData.dataList.length > 4) {

							showData.dataList = thisData.dataList.slice(0, 4)
							for (let index in thisData.dataList) {

								let thisItem = thisData.dataList[index]
								if (thisItem.result == 'ABNORMAL') showData.errNum += 1
								else showData.sucNum += 1
							}
						} else {
							showData.dataList = thisData.dataList
						}
						console.log("ssss", thisData)
						thisData.showData = showData
						thisData.completePercent = result.data.completePercent
						that.data6 = thisData
					},
				})
			},
		}
	}
</script>

<style scoped>
	.listItem5 {
		background-image: url('../../assets/sIcon190.png');
		background-size: 70% 70%;
		background-repeat: no-repeat;
		background-position: center;
	}
</style>